<template>
	<div class="books_show_wrapper">
		<div class="headbox" v-if="!isDetail">
			<h2>{{ columnData.meta.title }}</h2>
		</div>
		<router-view class="blist" />
	</div>
</template>

<script>
export default {
	computed: {
		columnData() {
			let columnArr = this.$route.matched;
			return columnArr[columnArr.length - 2];
		},
		columnSubData() {
			let routeArr = this.$router.options.routes;
			let mainRoute = routeArr[routeArr.length - 1];
			let bookRoute = mainRoute.children.find(item => item.name === this.columnData.name);
			return bookRoute.children.filter(item => !item.hidden);
		},
		isDetail() {
			return this.$route.meta.isDetail;
		}
	}
};
</script>

<style lang="scss" scoped>
.books_show_wrapper {
	padding-bottom: 64px;
	.headbox {
		display: flex;
		align-items: center;
		padding: 0 15px;
		height: 72px;
		background: url('../../assets/img/bg_headbox.png') no-repeat center;
		border: solid 1px #f4f4f4;
		h2 {
			font-size: 24px;
			line-height: 66px;
			font-weight: bold;
			font-family: 'simsun';
			color: #357c65;
			border-bottom: solid 3px #357c65;
			padding-top: 3px;
		}
	}
	.blist {
		margin-top: 40px;
		overflow: hidden;
	}
}
</style>
